<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('台账')"/>
  <style type="text/css">
		.active{
			background:url(/img/monitor-device-footer-btn-active.8e5a6f6.png) center no-repeat  !important; ;
		}
		ul.buttonList li:hover{
			background:url(/img/monitor-device-footer-btn-active.8e5a6f6.png) center no-repeat  !important;
		}
		
		ul.buttonList li{
			line-height:36px;
			text-align:center; 
			background:url(/img/monitor-device-footer-btn.bc4e75d.png) center no-repeat ;
			height: 36px;
			width: 116px;
			float: left;
			margin-left: 10px
		}
		
		.t-ctn {
	        width: 994px;
	        overflow-x: auto;
	        overflow-y: hidden;
	        margin-left: 14px
	    }

	    .t-ctn .s-ctn {
	        height: 136px;
	        white-space: nowrap;
	    }
	
	    .t-ctn .s-ctn .each {
	        box-sizing: border-box;
	        overflow: hidden;
	        display: inline-block;
	        width: 349px;
	        height: 100%;
	        border: 1px solid #26d7ce;
	    }
	   .t-ctn .s-ctn .each span{
				display:inline-block ;
				height: 20px;
/* 				padding-left: 10px; */
     			padding-top: 2px; 
     			color: #333;
		}
	    
	</style>
    <th:block th:include="include :: qrcode-js" /> 
</head>

<body class="gray-bg">
	
	<div class="col-sm-12 btn-group-sm"  role="group" style="color: #ffffff;margin-bottom: 2px">
		<form id="toolLedgerList-form">
        <div class="select-list">
		<input type="hidden" id="dprtcode" name="dprtcode"  readonly />
        <ul style="float: left;">
           	<li>
				<span style="color: #ffffff">工具类型：</span>
			 	<select class="selectpicker" id="toolsTypeId" name="toolsTypeId"  data-live-search="true" data-size="10" >
  			  	</select>
	  			&nbsp;&nbsp;
	  			<span style="color: #ffffff">关键字：</span>
	  			<input  type="text" placeholder='编号/工具名称/工具厂家/规格型号'  name="keyword" id="keyword"  style="background:#fdfcfc"/>&nbsp;&nbsp;
	  			<a class="btn btn-primary btn-rounded btn-sm" style="height: 23px;margin-bottom: 4px;line-height: 23px;" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>&nbsp;
	  			</li>
		</ul>
		</div>
		</form>
       </div>
	
    <div class="col-sm-12  table-striped " style="width: 975px;overflow-y:auto;height: 382px;overflow-x:auto;" >
	    <table id="bootstrap-table" data-mobile-responsive="true" class="text-nowrap" ></table>
	</div>
    <div id="notice" th:fragment="notice"> 
             <div class="panel" style="background-color:transparent;margin-bottom: 4px"  >
                 <div  style="color:#ffffff ;text-align: center;" >
              		  <span class="label label-warning " style="font-size: 21px;background-color: #f0ad4e00;margin-top: 10px;    margin-right: 40px;" >未归还总数：<span style="color: red">[[${notReturnedNums}]]</span> 件</span>
                 </div>
             </div>
             <div class="t-ctn">
	        <div class="s-ctn">
	       		 <div th:each ="list,userStat: ${lists}" style="background-color: #ffffff;" class="each">
	       		 		<input th:id="'text' + ${userStat.index}"  type="text"  th:value = "'http://www.rui9.net/code?lg=0&id=' + ${list.id}"  style="width:80%;display: none;" />
                         		<div  class="pull-left" style=" position:relative;right: -10px;top: 5px;width:1px; height:1px;color: #26d7ce" >
                         		2020-04-03 15:56:50
                         		</div>
                         		<div  th:id="'qrcode' + ${userStat.index}" class="pull-left" style=" position:relative;right: -10px;top: 36px;width:80px; height:98px;" >
                         		</div>
	       		 				<div style="    margin-top: 31px;    margin-left: 98px;">
	                                		<span>工具名称：[[${list.toolName}]]</span>
	                                		<br>
	                                		<span>工具id：[[${list.useCode}]]   </span>
	                                		<br>
	                                   		<span th:if = "${list.inoutState } == 2"> 领用人：张三</span>
	                                   		<span th:if = "${list.inoutState } == 3"> 试验人：李四</span>
	                                		<br>
	                                   		<span>作业地点：武汉市江夏区东湖高新</span>
	                                   		
                                   		    <script type="text/javascript" th:inline="javascript">
												    /*<![CDATA[*/
												    var i = /*[[${userStat.index}]]*/;  //生成二维码
												    
												       var qrcode = new QRCode(document.getElementById("qrcode"+i), {
														width : 80,
														height : 80,
														correctLevel : QRCode.CorrectLevel.M

													});

													function makeCode () {		
														var elText = document.getElementById("text"+i);
														
														if (!elText.value) {
															elText.focus();
															return;
														}
														
														qrcode.makeCode(elText.value);
													}

													makeCode();
// 												 
													$("#text"+i).
														on("blur", function () {
															makeCode();
														}).
														on("keydown", function (e) {
															if (e.keyCode == 13) {
																makeCode();
															}
														});   
													
													
												    /*]]>*/
												</script> 
											</div>
	             </div>
	        </div>
	    </div>
        	</div>
<th:block th:include="include :: footer" />
<script  th:src="@{/stm/dataV/accountlist.js}"></script>
<script th:inline="javascript">
	
	
	var kf_tools_inout_state = [[${@dict.getType('kf_tools_inout_state')}]];	
	var voltage_level = [[${@dict.getType('voltage_level')}]];	
	$('ul.buttonList li').on('click',function(e){
	    $(this).addClass("active").siblings().removeClass("active");
	})

</script>
</body>
</html>
